<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
submitBtnEl.onclick = function () {
    // 2. 处理用户输入的内容
    let sender = inputEls[0].value;
    let receiver = inputEls[1].value;
    let content = inputEls[2].value;
    // 非空校验
    if (sender == '' || receiver == "" || content == "") {
        alert('请正确输入内容');
        return;
    }
    // 3. 构造表白结果
    let str = '<b>' + sender + '</b> 对 <b>' + receiver + '</b>说：<b>' + content + '.</b>'
    // 4. 构建一个p标签 
    let messageRow = document.createElement('p');
    messageRow.innerHTML = str;
    // 4. 把结果加入到表白墙上
    messageEl.appendChild(messageRow)
    // 5. 清空输入框中的内容
    inputEls.forEach(element => {
        element.value = '';
    });

    // 处提交逻辑
    // 1. 封装JSON对象
    let postJson = {
        "sender" : sender,
        "receiver": receiver,
        "content" : content
    };
    let jsonStr = JSON.stringify(postJson);
    console.log(jsonStr);
    // 2. 提交AJVA请求
    $.ajax({
        // 请求使用的方法
        type: 'post',
        // 请求的URL，注意不要加斜杠
        url: 'message2',
        // 格式
        contentType: 'application/json',
        // 发送的数据
        data: jsonStr,
        // 成功时的回调
        success : function(data) {
            console.log(data);
        }
    })
};

// 发送请求获取已有留言
$.ajax({
     // 请求使用的方法
     type: 'get',
    // 请求的URL，注意不要加斜杠
    url: 'message2',
    // 回调
    success: function (data) {
        data.forEach(element => {
            console.log(element);
            // <p><b>唐僧</b> 对 <b>悟空</b>说：<b>为师有点饿了.</b></p>
            // 1. 创建一个P标签
            let pEl = document.createElement('p');
            // 2. 构造内容
            pEl.innerHTML = '<b>'+element.sender+'</b> 对 <b>'+element.receiver+'</b>说：<b>'+element.content+'.</b>'
            // 3. 加入到父标签下
            messageEl.appendChild(pEl);

        });
        // 结果是一个数组，遍历结果
        // for (let index = 0; index < data.length; index++) {
        //     element = data[index];
        //     console.log(element);
        // }
        
    }
});

</html>